@import "@/styles/var.scss";
@import "@/styles/fun.scss";

.ContentMdComponent {

    // 自定义文章内容样式
    .markdown-body {
        // 继承父级字体：font-family: inherit;
        @apply font-[inherit] dark:bg-transparent dark:text-gray-400 !transition-colors;

        pre {
            display: flex;
            position: relative;
            margin: 15px 0;

            &:hover button {
                @apply opacity-100;
            }

            ul.lineNumber {
                @apply absolute left-[16px] top-[16px] mt-[1.5px] text-base block;
            }

            code.hljs {
                width: 100%;
                padding-left: 50px;
                border-radius: 10px;
                font-weight: 400;

                @include scrollbar-style(rgba(255, 255, 255, 0.3));
            }
        }

        img {
            // 图片模糊
            @apply blur-[20px] rounded-xl hover:scale-105 cursor-pointer transition-all;
        }

        h1,
        h2,
        h3,
        h4,
        h5,
        h6 {
            font-weight: bold;
            scroll-margin-top: 100px !important;
            @apply dark:text-white dark:border-black-b transition-colors;
        }

        h1 {
            @apply text-2xl mt-10 pb-3 border-b;

            &:first-child {
                @apply my-6;
            }
        }

        h2 {
            @apply relative text-xl my-6;
        }

        h3 {
            @apply relative text-lg my-5;
        }

        h4,
        h5,
        h6 {
            @apply relative text-lg my-3;
        }

        hr {
            @apply my-5 border dark:border-[#4e5969] transition-colors;
        }

        // 行内代码
        p code,
        ul code,
        ol code {
            @apply bg-[rgba(13,110,253,0.1)] dark:bg-[#334052] text-[#0d6efd] rounded-md py-1 px-2 text-sm transition-colors;
        }

        // 任务列表
        li.task-list-item {
            @apply my-2.5;
        }

        li:not(.task-list-item) {
            @apply my-2.5 ml-6;
        }

        // 无序列表
        ul:not(.contains-task-list) {
            @apply list-disc;
        }

        // 有序列表
        ol:not([start]) {
            counter-reset: counter;
        }

        ol>li:not([id^="user-content-fn-"]) {

            &::before {
                @apply absolute w-4 h-4 mt-1 leading-none left-0 rounded-full text-center text-sm border border-[#11181C] dark:border-gray-400;

                counter-increment: counter;
                content: counter(counter);
            }

            & ol>li::before {
                @apply absolute left-7 border-0 text-base mt-0 leading-normal;

                content: counter(counter) ".";
            }
        }

        // 引用
        blockquote {
            @apply my-5 pl-4 bg-[rgba(246,248,250)] border-l-[4px] border-[#11181C] dark:border-gray-500 dark:bg-[rgba(246,248,250,0.1)];
        }

        // 脚注
        .footnotes {
            @apply mt-10 before:content-[''];

            &>h2 {
                @apply text-yellow-500;
            }

            &::before {
                @apply block w-full h-[1px] bg-gray-300;
            }

            & ol {
                @apply list-decimal;
            }
        }

        // 高亮标记
        mark {
            @apply bg-[#dbfdad] dark:bg-[#9db47e];
        }

        // 提示块
        .callout-content {
            @apply pt-1;

            &>p {
                @apply mb-0;
            }
        }

        // 数学公式
        .katex {
            @apply text-base;
        }

        a {
            @apply text-primary
        }

        p {
            @apply leading-9 mb-2;
        }

        strong {
            @apply text-[15px];
        }

        table {
            @apply w-full;

            th {
                @apply bg-[#f1f7fd] dark:bg-[#334052];
            }

            tr,
            th,
            td {
                @apply border p-[10px_20px];
            }
        }

        input[type="checkbox"] {
            width: 16px;
            height: 16px;
            border-radius: 4px;
            position: relative;
            cursor: not-allowed;
        }
    }

    .douyin {
        min-width: 320px;
        min-height: 720px;
        border-radius: 10px;
        margin: 10px 0;
    }
}